<template>
  <div>
    <common-header>
      <template v-slot:title> 结算页 </template>
    </common-header>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="16" :offset="4">
        <el-card>
          <div slot="header" class="clearfix">
            <span style="font-size: 17px; font-weight: 700">收货人地址</span>
            <el-button
              style="float: right; padding: 3px 0"
              @click="showEditDialog"
              type="text"
              >新增收货地址</el-button
            >
          </div>
          <div style="font-size: 14px">
            <div class="address-info">
              <el-table :data="oneAdder" style="width: 100%">
                <el-table-column prop="receiverName" label="姓名" width="180">
                </el-table-column>
                <el-table-column
                  prop="receiverMobile"
                  label="电话"
                  align="center"
                  width="260"
                >
                </el-table-column>
                <el-table-column label="地址">
                  <template slot-scope="scope">
                    {{ scope.row.province }}{{ scope.row.city
                    }}{{ scope.row.area }}{{ scope.row.addr }}
                  </template>
                </el-table-column>
                <el-table-column align="center" label="操作">
                  <template slot-scope="scope">
                    <span type="info" class="default-address mr10">默认</span>
                    <el-button
                      style="margin-top: 5px"
                      type="text"
                      class="edit-btn"
                      @click="redactEditDialog(scope.row.addrId)"
                      >编辑</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <el-button @click="showMore = false" v-if="showMore" type="text">
              展示更多
              <i class="fa fa-angle-double-down"></i>
            </el-button>
            <div v-if="!showMore">
              <el-table
                :data="tableData"
                highlight-current-row
                style="width: 100%"
                @current-change="handleCurrentChange"
              >
                <el-table-column prop="receiverName" width="180">
                </el-table-column>
                <el-table-column
                  prop="receiverMobile"
                  align="center"
                  width="260"
                >
                </el-table-column>
                <el-table-column>
                  <template slot-scope="scope">
                    {{ scope.row.province }}{{ scope.row.city
                    }}{{ scope.row.area }}{{ scope.row.addr }}
                  </template>
                </el-table-column>
                <el-table-column align="center">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      style="float: right"
                      @click="ChangeDefault(scope.row.addrId)"
                      >设置为默认地址</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <el-button @click="showMore = true" v-if="!showMore" type="text">
              收起地址
              <i class="fa fa-angle-double-up"></i>
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="16" :offset="4" style="margin-top: 30px">
        <el-table :data="tableDatas" ref="multipleTable" tooltip-effect="dark">
          <el-table-column label="商品信息" width="400" align="center">
            <template slot-scope="scope">
              <div>
                <el-image
                  style="width: 100px; height: 100px"
                  :src="scope.row.productSkus.skuImg"
                  :fit="fits"
                />
              </div>
              <div>
                {{ scope.row.skuProps }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="productSkus.sellPrice"
            label="单价"
            align="center"
          />
          <el-table-column
            label="数量"
            align="center"
            width="300"
            prop="cartNum"
          />
          <el-table-column label="金额" align="center">
            <template slot-scope="scope">
              <span
                >￥{{
                  scope.row.cartNum * scope.row.productSkus.sellPrice
                }}</span
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="6" :push="8" style="margin-top: 20px">
        <div>
          <el-radio v-model="radio1" label="1" border>
            <img
              src="https://spring1024.oss-cn-beijing.aliyuncs.com/2022/02/22/5eafd2fd012b419ebab549d8a2f8e39dzfbzf.png"
              width="20"
              height="20"
            />
            支付宝支付</el-radio
          >
          <el-radio v-model="radio1" label="0" border>
            <img
              src="https://spring1024.oss-cn-beijing.aliyuncs.com/2022/02/22/db349bd952fd4d698e7699710321d5bfwxzf.png"
              width="20"
              height="20"
            />
            微信支付</el-radio
          >
        </div>
      </el-col>
      <el-col :span="6" :push="8" style="margin-top: 20px">
        <div class="grid-content">
          <div class="account">
            <span class="realpay">实付款：</span>
            <span class="realpay--title">￥</span>
            <span class="realpay--price">{{ this.totalPrice }}</span>
          </div>
          <div class="confirmAddr-addr-bd">
            <span>寄送至：</span>
            <span
              >{{ this.province }}{{ this.city }}{{ this.area
              }}{{ this.addr }}</span
            >
          </div>
          <div class="confirmAddr-addr-bd">
            <span>收货人：</span>
            <span>{{ this.username }}{{ this.mobile }}</span>
          </div>
        </div>
      </el-col>

      <el-col
        :span="6"
        :push="4"
        style="margin-top: 130px; padding: 10px 5px 10px 20px"
      >
        <el-button type="warning" @click="getBack">返回购物车</el-button>
        <el-button type="warning" @click="pay">立即支付</el-button>
        <!-- <el-button type="warning" @click="gotoWX">微信支付</el-button>
        <el-button type="warning" @click="gotoZF">支付宝支付</el-button> -->
      </el-col>
    </el-row>
    <edit-address
      ref="editDialog"
      :user="userId"
      @refresh="getToken"
    ></edit-address>
    <redact-dialog
      ref="redactDialog"
      :editUserForm="singleUser"
      @refresh="getToken"
    ></redact-dialog>
    <Footer style="margin-top: 20px"></Footer>

    <el-dialog title="" :visible.sync="WXVisible" width="495px">
      <wx-mode :vx="vxMessage"></wx-mode>
    </el-dialog>

    <el-dialog title="" :visible.sync="ZFBVisible" width="495px">
      <zfb-mode :zfb="zfbMessage"></zfb-mode>
    </el-dialog>
  </div>
</template>


<script>
import CommonHeader from "@/components/CommonHeader";
import EditAddress from "@/components/Settle/EditAddress";
import Footer from "@/components/Index/Footer";
import http from "@/utils/request";
import RedactDialog from "../components/Settle/RedactDialog.vue";
import { TextToCode } from "element-china-area-data";
import "element-ui/lib/theme-chalk/index.css";

import WxMode from "@/components/pay/WxMode.vue";
import ZfbMode from "@/components/pay/ZfbMode.vue";

export default {
  components: {
    CommonHeader,
    EditAddress,
    Footer,
    RedactDialog,
    WxMode,
    ZfbMode,
  },

  data() {
    return {
      WXVisible: false,
      ZFBVisible: false,
      fits: "contain",
      userId: [],
      oneAdder: [],
      tableData: [],
      singleUser: {},
      showMore: true,
      currentRow: [],
      totalPrice: 0,
      sum: 0,
      province: "",
      city: "",
      area: "",
      addr: "",
      username: "",
      tableDatas: [],
      mobile: "",
      radio1: "0",
      order: "",
      actual: "",
      vxMessage: [],
      zfbMessage:[],
    };
  },

  mounted() {
    this.getToken();
    this.goto();
  },

  methods: {
    pay() {
     
      if (this.currentRow.length != 0) {
        this.order = this.currentRow;
      } else {
        let c = this.oneAdder;
        this.order = c[0];
      }
      let lc =
        this.order.province +
        this.order.city +
        this.order.area +
        this.order.addr;
      let ps = Number(this.radio1);
      let sk = this.tableDatas.map((v) => v.skuProps);
      let js = "";
      for (let i = 0; i < sk.length; i++) {
        js = sk[i] + "," + js;
      }
      http
        .post("/orders/e", {
          userId: this.order.userId,
          untitled: js,
          payType: ps,
          name: this.order.receiverName,
          mobile: this.order.receiverMobile,
          address: lc,
          total: this.totalPrice,
          actual: this.actual,
          shopping: this.tableDatas,
        })
        .then((res) => {
          let su = res.data.data;
          window.console.log(su.actualAmount)
          window.console.log(su.orderId)
      // 从后拿到二维码


      if (this.radio1 == "0") {
        this.WXVisible = true;
        this.ZFBVisible = false;
      } else if (this.radio1 == "1") {
        this.$router.push('/zfb_t') 
      }          
        });
        
    },
    goto() {
      let c = window.sessionStorage.getItem("currentID");
      let arr = JSON.parse(c);
      http
        .post("/shopping/account", {
          skuId: arr,
        })
        .then((res) => {
          this.tableDatas = res.data.data;
          let b = this.tableDatas.map((v) => {
            return v.cartNum * v.productSkus.sellPrice;
          });
          let c = this.tableDatas.map((v) => {
            return v.cartNum;
          });
          let d = 0;
          for (let i = 0; i < c.length; i++) {
            d = c[i] + d;
          }
          this.sum = 0;
          for (let i = 0; i < b.length; i++) {
            this.sum = b[i] + this.sum;
          }
          this.totalPrice = this.sum;
          this.actual = d;
        });
    },

    getToken() {
      this.userId = this.$route.query.id;
      http.get(`/adders/${this.userId}`).then((res) => {
        let a = res.data.data;
        this.tableData = a.filter((v) => v.commonAddr == 0);
        let b = a.filter((v) => v.commonAddr == 1);
        this.oneAdder = b;
        this.changAddress(b);
      });
    },

    getBack() {
      this.$router.push({ path: "/my-cart" });
    },

    showEditDialog() {
      this.$refs.editDialog.showEditDialog = true;
    },

    handleCurrentChange(val) {
      this.currentRow = val;
      this.changAddress(val);
    },

    changAddress(val) {
      if (this.currentRow.length != 0) {
        this.province = val.province;
        this.city = val.city;
        this.area = val.area;
        this.addr = val.addr;
        this.username = val.receiverName;
        this.mobile = val.receiverMobile;
      } else {
        let c = val[0];
        this.province = c.province;
        this.city = c.city;
        this.area = c.area;
        this.addr = c.addr;
        this.username = c.receiverName;
        this.mobile = c.receiverMobile;
      }
    },

    ChangeDefault(id) {
      // window.console.log(id)
      // window.console.log(this.oneAdder)
      let c = this.oneAdder;
      let p = c[0].addrId;
      let arr = [id, p];
      window.console.log(arr);
      http
        .post("/adders/common", {
          addrId: arr,
        })
        .then(() => {
          this.$router.go(0);
        });
    },

    redactEditDialog(addrId) {
      this.$refs.redactDialog.showEditDialog = true;
      http.get(`/adders/amend/${addrId}`).then((res) => {
        let su = res.data.data;
        let {
          addrId,
          userId,
          receiverName,
          receiverMobile,
          addr,
          province,
          city,
          area,
        } = su;
        let b = [
          TextToCode[su.province].code,
          TextToCode[su.province][su.city].code,
          TextToCode[su.province][su.city][su.area].code,
        ];
        let newSu = {
          addrId,
          userId,
          receiverName,
          receiverMobile,
          b,
          addr,
          province,
          city,
          area,
        };
        this.singleUser = newSu;
      });
    },
  },
};
</script>

<style scoped>
.realpay--title {
  font-size: 26px;
  margin-right: 4px;
  color: #999;
}

.confirmAddr-addr-bd {
  line-height: 1.6;
  font-weight: 700;
}

.realpay {
  font-weight: 700;
  color: #333;
}

.grid-content {
  border: 3px solid #fff0e8;
  padding: 10px 5px 10px 20px;
  border-radius: 4px;
  height: 80px;
  border: 1px solid #f56c6c;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* position:absolute */
}

.account {
  height: 39px;
  /* float: right; */
  /* position: relative; */
}

.realpay--price {
  color: #ff0036;
  font: 700 26px tahoma;
}

.default-address {
  background-color: #e3e3e3;
  padding: 3px 5px;
  position: relative;
  top: -2px;
  float: left;
}
.mr10 {
  margin-right: 10px;
}
.address-info {
  margin-bottom: 10px;
}
.edit-btn {
  float: right !important;
  padding: 0;
}
.item {
  display: flex;
}
.item .item-pic {
  width: 60px;
  height: 60px;
}
.tr {
  text-align: right;
}
.item .item-title {
  padding-left: 8px;
  width: 180px;
}
.settle-info {
  margin: 10px 0;
  font-size: 14px;
}
.settle-info .info {
  color: #f56c6c;
  font-weight: 700;
  font-size: 15px;
}
</style>